css patern

#css

자동 grid

grid-cols-[repeat(auto-fill,minmax(102px,1fr))]

아코디언

grid를 이용하면 height auto에 해당하는 애니메이션을 쉽게 줄 수 있다.

li > div[inert] { grid-template-rows: 0fr; }
li > div

완벽한 중앙 배치를 위한 텍스트 사이즈 컴팩트하게 잡기

.text {  text-box: cap alphabetic;}

커서가 있는 경우에만 hover 효과 적용

모바일에서 hover effect가 롱프레스-취소시 풀리지 않는 문제를 수정하기 위함.

	 @media (hover: hover) and (pointer: fine) {
		&:hover {
		  background-color: #dfe3e8;
		}
	 }

리퀴드 글래스 css 지원시 적용

@supports (-apple-visual-effect: -apple-system-glass-material) { 
	.toolbar { 
		background: transparent; 
		-apple-visual-effect: -apple-system-glass-material; 
	}
}

popover 사이드 바 고정

https://x.com/jh3yy/status/1977517175285154015

.layout:has(:popover-open) {
	grid-template-columns: var(--sidebar-width) 1fr; 
} 
aside:popover-open { 
	translate: 0 var(--ctrl); 
	height: var(--extend); 
}